<template>
  <view class="dy-scroll-container">
    <dy-navbar title="日历" />
    <scroll-view class="dy-scroll" scroll-y="">
      <!-- 基础用法 -->
      <dy-card>
        <dy-section slot="title" padding="0" title="基础用法" />
        <template slot="body">
          <dy-form v-bind="baseUsed.calendarPanel" padding="0">
            <dy-form-item
              label-width="100"
              prop="name"
              label="活动时间"
              @click="baseUsed.show = true"
            >
              <dy-input v-model="baseUsed.value" disabled />
            </dy-form-item>
          </dy-form>
        </template>
      </dy-card>
      <!-- 范围选择 -->
      <dy-card>
        <dy-section slot="title" padding="0" title="范围选择" />
        <template slot="body">
          <dy-form v-bind="range.calendarPanel" padding="0">
            <dy-form-item label-width="100" prop="name" label="活动时间" @click="range.show = true">
              <dy-input class="dy-w-100P" :value="getRangeValue" disabled />
            </dy-form-item>
          </dy-form>
        </template>
      </dy-card>
    </scroll-view>
    <dy-calendar
      v-model="baseUsed.show"
      :calendar-panel="{
        value: baseUsed.value
      }"
      @confirm="baseUsed.value = $event"
    />
    <dy-calendar
      v-model="range.show"
      :calendar-panel="{
        value: range.value,
        type: 'range',
        dateFormat: 'YYYY.MM.DD'
      }"
      :popup="{
        mask: {
          appendToBody: true
        }
      }"
      @confirm="range.value = $event"
    />
  </view>
</template>

<script>
export default {
  name: 'Canlendar',
  data() {
    return {
      baseUsed: {
        show: false,
        value: '2020-5-20'
      },
      range: {
        show: false,
        value: ['2020.5.2', '2020.5.20']
      }
    }
  },
  computed: {
    getRangeValue() {
      return this.range.value.join(' - ')
    }
  },

  methods: {}
}
</script>
